<!--
  * 订单报表-订单销售汇总（业务员）
  *
-->
<template>
  <!---------- 查询表单form begin ----------->
  <a-card size="small" :bordered="false" :hoverable="false" class="query-form-wrapper smart-margin-bottom10 smart-radius-2">
    <a-form :model="queryForm" labelAlign="left">
      <a-row :gutter="[8, 10]">
        <a-col :span="{ sm: 7, md: 6 }">
          <a-form-item label="单据日期" class="smart-margin-bottom0">
            <custom-range-picker v-model:value="queryForm.create_time" />
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item label="业务员" class="smart-margin-bottom0">
            <Select name="Salesman" v-model:value="queryForm.salesman_id" placeholder="请选择" @input-enter="onSearch" />
          </a-form-item>
        </a-col>
        <a-col :span="3.5">
          <a-form-item label="订单类型" class="smart-margin-bottom0">
            <a-radio-group v-model:value="queryForm.type" @change="onSearch">
              <a-radio-button value="">全部</a-radio-button>
              <a-radio-button value="1">访销</a-radio-button>
              <a-radio-button value="2">车销</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="订单状态" class="smart-margin-bottom0">
            <a-radio-group v-model:value="queryForm.status" @change="onSearch">
              <a-radio-button value="">全部</a-radio-button>
              <a-radio-button value="1">待审核</a-radio-button>
              <a-radio-button value="2">待出库</a-radio-button>
              <a-radio-button value="3">待签收</a-radio-button>
              <a-radio-button value="4">已完成</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-button-group>
            <a-button type="primary" html-type="submit" @click="onSearch" v-privilege="'goods:query'">
              <template #icon>
                <SearchOutlined />
              </template>
              查询
            </a-button>
            <a-button @click="resetQuery" v-privilege="'goods:query'">
              <template #icon>
                <ReloadOutlined />
              </template>
              重置
            </a-button>
          </a-button-group>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
  <!---------- 查询表单form end ----------->

  <a-card size="small" :bordered="false" :hoverable="true" class="query-table-wrapper">
    <!---------- 表格操作行 begin ----------->
    <a-row class="smart-table-btn-block">
      <div class="smart-table-operate-block">
        <a-button @click="onExport" type="primary" v-privilege="'goods:exportGoods'">
          <template #icon>
            <ExportOutlined />
          </template>
          导出
        </a-button>
      </div>
      <div class="smart-table-setting-block">
        <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.ERP.GOODS" :refresh="queryData" />
      </div>
    </a-row>
    <!---------- 表格操作行 end ----------->
    <div class="table-wrapper">
      <a-table size="small" :dataSource="tableData" :columns="columns" rowKey="salesman_id" bordered :scroll="{ x: 'max-content', y: tableScrollY }" :pagination="false" :showSorterTooltip="false" :loading="tableLoading" :row-selection="{ fixed: true, selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }">
        <template #summary>
          <a-table-summary fixed>
            <a-table-summary-row>
              <a-table-summary-cell>总计</a-table-summary-cell>
              <a-table-summary-cell />
              <a-table-summary-cell>
                <a-typography-text type="danger">{{ Number(total_amount.total_sale_price || 0).toFixed(2) }}</a-typography-text>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <a-typography-text type="danger">{{ Number(total_amount.total_return_price || 0).toFixed(2) }}</a-typography-text>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <a-typography-text type="danger">{{ Number(total_amount.sale_orders || 0) }}</a-typography-text>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <a-typography-text type="danger">{{ Number(total_amount.return_orders || 0) }}</a-typography-text>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <a-typography-text type="danger">{{ Number(total_amount.total_orders || 0) }}</a-typography-text>
              </a-table-summary-cell>
            </a-table-summary-row>
          </a-table-summary>
        </template>
      </a-table>
    </div>

    <div class="smart-query-table-page query-table-page">
      <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS" :defaultPageSize="queryForm.limit" v-model:current="queryForm.page" v-model:pageSize="queryForm.limit" :total="total" @change="queryData" @showSizeChange="queryData" :show-total="() => `共${total}条`" />
    </div>
  </a-card>
</template>
<script setup lang="ts">
import CustomRangePicker from '@/components/business/custom-range-picker/index.vue'
import Select from '@/components/business/select/index.vue'
import { orderReportApi } from '@/api/business/report/report-api'
import TableOperator from '@/components/support/table-operator/index.vue'
import { useQuery } from '@/hooks/web/use-query-hook'
import { PAGE_SIZE_OPTIONS, DEFAULT_TIME_RANGE } from '@/constants/system/common-const'
import { TABLE_ID_CONST } from '@/constants/support/table-id-const'
import { useResize } from '@/hooks/web/use-resize-hook'

// ----------------------------- 计算表格高度 -----------------------------
const { tableScrollY, expand } = useResize()

// ---------------------------- 表格列 ----------------------------

const columns = ref([
  {
    title: '业务员',
    dataIndex: 'rename'
  },
  {
    title: '销售金额',
    dataIndex: 'total_sale_price'
  },
  {
    title: '退货金额',
    dataIndex: 'total_return_price'
  },
  {
    title: '销售订单数',
    dataIndex: 'sale_orders'
  },
  {
    title: '退货订单数',
    dataIndex: 'return_orders'
  },
  {
    title: '订单数量',
    dataIndex: 'total_orders'
  }
])

// ---------------------------- 查询数据表单和方法 ----------------------------
const total_amount = ref({
  total_sale_price: 0,
  total_return_price: 0,
  total_orders: 0,
  sale_orders: 0,
  return_orders: 0
})
const { queryForm, tableData, tableLoading, total, queryData, onSearch, resetQuery } = useQuery({
  fetchDataApi: async ({ page, limit, filter }) => {
    const params = {
      page,
      limit,
      report_type: 1,
      ...filter
    }
    const res = await orderReportApi.queryList(params)
    total_amount.value = res.data.sum_data
    return {
      list: res.data.data,
      total: res.data.total
    }
  },
  queryFormFilter: {
    type: '',
    salesman_id: undefined,
    status: '',
    create_time: DEFAULT_TIME_RANGE.value
  },
  queryFormOp: {}
})
onMounted(queryData)

// ---------------------------- 批量 ----------------------------

// 选择表格行
const selectedRowKeyList = ref([])

function onSelectChange(selectedRowKeys) {
  selectedRowKeyList.value = selectedRowKeys
}

// ------------------------------- 导出和导入 ---------------------------------
// 导出
function onExport() {
  const data = {
    type: queryForm.value.type,
    salesman_id: queryForm.value.salesman_id,
    status: queryForm.value.status,
    create_time: queryForm.value.create_time,
    report_type: 1
  }
  orderReportApi.exportOrderReport(data)
}
</script>
